import { Component } from 'react'

import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'

import './App.css'

export default class App extends Component {
  state = {
    todos: [
      { id: 1, name: '吃饭', isDone: false },
      { id: 2, name: '睡觉', isDone: false },
      { id: 3, name: '写代码', isDone: false }
    ]
  }

  // 用于添加 todos 对象
  headerPushData = (newObj) => {
    console.log(this)
    console.log('obj-->value', newObj)
    const { todos } = this.state
    this.setState({
      todos: [newObj, ...todos]
    })
  }

  // 更新 todos 状态
  updateTodosStatus = (id, isDone) => {
    const { todos } = this.state
    const newTodos = todos.map((item) => {
      if (item.id === id) return { ...item, isDone }
      else return item
    })
    this.setState({ todos: newTodos })
  }

  // 删除 todos 中某一项，并更新 todos 状态
  delTodosItem = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter((item) => item.id !== id)
    this.setState({ todos: newTodos })
  }

  // 重置所有 todos 已选择状态
  resetAllSelect = () => {
    const { todos } = this.state
    const newTodos = todos.map((item) => {
      if (item.isDone) return { ...item, isDone: false }
      else return item
    })
    this.setState({ todos: newTodos })
  }

  // 全选/反选所有 todos
  selectAll = (isDone) => {
    const { todos } = this.state
    const newTodos = todos.map((item) => {
      return { ...item, isDone }
    })
    this.setState({ todos: newTodos })
  }

  render() {
    const { todos } = this.state
    return (
      <div className="content">
        <Header headerPushData={this.headerPushData} />
        <List
          todos={todos}
          updateTodosStatus={this.updateTodosStatus}
          delTodosItem={this.delTodosItem}
        />
        <Footer
          todos={todos}
          resetAllSelect={this.resetAllSelect}
          selectAll={this.selectAll}
        />
      </div>
    )
  }
}
